<template>
  <div class="outsidede">
    <div style="margin:20px 0 0 0;font-size:14px;font-weight:600">精彩评论</div>
    <div v-for="(items,i) in comment" :key='i' class="recommend_item">
      <img :src="items.user.avatarUrl" style="width:35px;height:35px;border-radius:50%;cursor:pointer" @click="GoProfile(items.user.userId)">
      <div style="display:flex;flex-direction:column;margin-left:15px">
        <span><span style="color:rgb(80,125,175);cursor:pointer" @click="GoProfile(items.user.userId)">{{items.user.nickname}} : </span><span>{{items.content}}</span></span>
        <span style="color:rgb(159,159,159);margin-top:5px">{{items.time | dataFormat}}</span>
      </div>
      <span style="position:absolute;right:0;bottom:20px;color:rgb(102,102,102);cursor:pointer" @click="dianZan(items.commentId,i)">
        <i class="iconfont icon-zan" v-if="!items.liked" style="font-size:13px"></i>
        <i v-else class="iconfont icon-zan" style="color:rgb(236,65,65);font-size:13px"></i>
        {{items.likedCount}}
      </span>
    </div>
    <!-- <div class="morecomment" v-show="ishasmore1" @click="moreComment">更多精彩评论></div> -->
  </div>
</template>

<script>
import {request} from 'network/request'
import {dataFormat} from 'common/filter'
export default {
  name:'perfectComment',
  data(){
    return{
      query:{
        id:null,
        type:null,
        pageNo:1,
        pageSize:20,
        sortType:2,
        cursor:''
      },
      comment:[],
      ishasMore:null
    }
  },
  methods:{
    async getHotComments(){
      const data = await request('GET','comment/new',this.query)
      this.comment = this.comment.concat(data.data.comments)
      this.ishasMore = data.data.hasMore
      this.query.cursor = data.data.cursor
    },
    handleScroll(e) {
      if (e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight) {
        this.query.pageNo++
        this.getHotComments()
      }
    },
    async dianZan(commentIds,i){
      let item = this.comment[i]
      if(item.liked === false){
        const data = await request('GET','comment/like',{id:this.query.id,cid:commentIds,t:1,type:this.query.type})
        if(data.code === 200){
          item.liked = true
          item.likedCount++
        }else{
          this.$message.error('出错了！')
        }
      }else{
        const data = await request('GET','comment/like',{id:this.query.id,cid:commentIds,t:0,type:this.query.type})
        if(data.code === 200){
          item.liked = false
          item.likedCount--
        }else{
          this.$message.error('出错了！')
        }
      }
    },
    GoProfile(id){
      this.$router.push('/profile/'+id)
    }
  },
  created(){
    this.query.id = this.$route.params.id
    this.query.type = this.$route.params.type
    this.getHotComments()
  },
  filters:{
    dataFormat
  },
  mounted() {  
    window.addEventListener('scroll', this.handleScroll, true);
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll);
  },
}
</script>

<style scoped>
  .recommend_item{
    padding: 20px 0;
    border-bottom: 1px solid rgb(242,242,242);
    font-size: 5px;
    display: flex;
    position: relative;
  }
</style>